<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<style type="text/css">
			body {
				margin: 10px;
				background-color: antiquewhite;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.chess {
				margin-top: 30px;
				height: 100px;
				display: flex;
				justify-content: space-around;
				align-items: center;
				border: 5x solid #333;
			}
		</style>
		<script type="text/javascript">
			let canvas;
			let context;
			let isWhite = true; //白棋先走
			let isWell = false; //是否赢

			let img_b = new Image();
			img_b.src = "images/white_1.png"; //白棋图片
			let img_w = new Image();
			img_w.src = "images/black_1.png"; //黑棋图片

			let chessData = new Array(15).fill(0).map(item => new Array(15).fill(0)); //棋盘
			console.log(chessData);

			let whiteChess = document.querySelector('.white')
			let blackChess = document.querySelector('.black')

			// 初始化棋盘
			function drawRect() {
				canvas = document.getElementById("canvas");
				context = canvas.getContext("2d");
				//绘制棋盘的线
				for (let i = 0; i <= 640; i += 40) {
					context.beginPath();
					context.moveTo(0, i);
					context.lineTo(640, i);
					context.closePath();
					context.stroke();

					context.beginPath();
					context.moveTo(i, 0);
					context.lineTo(i, 640);
					context.closePath();
					context.stroke();
				}
			}
			//鼠标点击时发生
			function play(e) {
				let x = parseInt((e.clientX - 170) / 40);
				let y = parseInt((e.clientY - 20) / 40);
				if (chessData[x][y] != 0) { //判断该位置是否被下过了
					alert("不能在这个位置下棋");
					return;
				}
				if (isWhite) {
					isWhite = false;
					drawChess(1, x, y);
				} else {
					isWhite = true;
					drawChess(2, x, y);
				}
			}
			// 绘制黑白棋
			function drawChess(chess, x, y) {
				if (isWell == true) {
					alert("已分胜负");
					return;
				}
				if (x >= 0 && x < 15 && y >= 0 && y < 15) {
					if (chess == 1) {
						context.drawImage(img_w, x * 40 + 20, y * 40 + 20); //绘制白棋
						chessData[x][y] = 1;
					} else {
						context.drawImage(img_b, x * 40 + 20, y * 40 + 20);
						chessData[x][y] = 2;
					}
					judge(x, y, chess);
				}
			}
			// 判断胜负
			function judge(x, y, chess) {
				let count1 = 0;
				let count2 = 0;
				let count3 = 0;
				let count4 = 0;

				//左右判断
				for (let i = x; i >= 0; i--) {
					if (chessData[i][y] != chess) {
						break;
					}
					count1++;
				}
				for (let i = x + 1; i < 15; i++) {
					if (chessData[i][y] != chess) {
						break;
					}
					count1++;
				}
				//上下判断
				for (let i = y; i >= 0; i--) {
					if (chessData[x][i] != chess) {
						break;
					}
					count2++;
				}
				for (let i = y + 1; i < 15; i++) {
					if (chessData[x][i] != chess) {
						break;
					}
					count2++;
				}
				//左上右下判断
				for (let i = x, j = y; i >= 0, j >= 0; i--, j--) {
					if (chessData[i][j] != chess) {
						break;
					}
					count3++;
				}
				for (let i = x + 1, j = y + 1; i < 15, j < 15; i++, j++) {
					if (chessData[i][j] != chess) {
						break;
					}
					count3++;
				}
				//右上左下判断
				for (let i = x, j = y; i >= 0, j < 15; i--, j++) {
					if (chessData[i][j] != chess) {
						break;
					}
					count4++;
				}
				for (let i = x + 1, j = y - 1; i < 15, j >= 0; i++, j--) {
					if (chessData[i][j] != chess) {
						break;
					}
					count4++;
				}

				if (count1 >= 5 || count2 >= 5 || count3 >= 5 || count4 >= 5) {
					if (chess == 1) {
						alert("白棋赢");
					} else {
						alert("黑棋赢");
					}
					isWell = true;
				}
			}
		</script>
	</head>
	<body onload="drawRect()">
		<div id="container">
			<canvas width="640" id="canvas" onmousedown="play(event)" height="640">
				你的浏览器不支持HTML5 canvas ，请使用 google chrome 浏览器 打开.
			</canvas>
			<div class="chess">
				<img src="./images/white_1.png" alt="白棋" class="white" draggable="true">
				<img src="./images/black_1.png" alt="黑旗" class="black" draggable="true">
			</div>
		</div>
	</body>
</html>